<template>
    <div>
<table>
    <tbody>
        <tr>
            <td>食谱标题</td>
            <td>
                <a style="color: red;">*</a>
                <input type="text" name="" id="" v-model="date.fname">
            </td>
        </tr>
        <tr>
            <td>分类</td>
            <td>
                <a style="color: red;">*</a>
                <select v-model="date.tid">
<option value="0">请选择</option>
<option :value="a.id" v-for="a in lists">{{ a.tname }}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>图片上传</td>
            <td>
                <a style="color: red;">*</a>
                <input type="file" name="" @change="upload"  id="">
                <img :src="'https://localhost:7019/'+date.img" width="200px" height="100px" alt="">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" value="保存" @click="add">
            </td>
            
        </tr>
    </tbody>
</table>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
onMounted(()=>{
    band()
})
const upload=(a:any)=>{
var b=a.target.files[0]
var fd=new FormData()
fd.append("file",b)
axios.post('https://localhost:7019/api/Upload',fd).then(res=>{
date.value.img=res.data
        
     })

}
const router=useRouter()
const add=()=>{
if(date.value.fname==""){
alert('食谱标题不能为空')
    return
}
if(date.value.tid==0){
alert('分类不能为空')
    return
}
if(date.value.img==""){
alert('图片不能为空')
    return
}


    axios.post('https://localhost:7019/api/Food/Add',date.value).then(res=>{
if(res.data>0){
alert('成功')
router.push({path:"/fshow"})
}else{
    alert('失败')
}

    })
}
const date=ref({
  "fid": 0,
  "fname": "",
  "tid": 0,
  "img": ""
})
const lists=ref([{
    "id": 0,
    "tname": ""
}])
const band=()=>{
    axios.get('https://localhost:7019/api/Type').then(res=>{
lists.value=res.data
        
     })
}
// const add=()=>{
//     axios.post('').then(res=>{

        
//     })
// }
</script>

<style scoped>

</style>